<template>
  <div class="mplatformpressrelease">
    <el-row>
      <el-col :span="18" style="margin-bottom: 10px">
        <el-radio-group v-model="view" @change="viewChange"    >
          <el-radio-button label="all"  >全部</el-radio-button>
          <el-radio-button label="read" >已读</el-radio-button>
          <el-radio-button label="unRead">未读</el-radio-button>
        </el-radio-group>
      </el-col>
      <el-col :span="6">
        <el-input
          placeholder="请输入关键字"
          icon="el-icon-search"
          v-model="condition.title"
          @keyup.enter.native="handleIconClick"
          :on-icon-click="handleIconClick">
        </el-input>
      </el-col>
    </el-row>
    <el-card >
      <div v-for="(o,index) in tableData" class="mwhiteborder" :key="index">
        <div  class="divheight1 bigborder">
          <div  class="mmargintop mfonts mwidth mfloatleft">
            <label v-if="o.isStick===111002001" class="stick" >[置顶]</label>
            <a style="cursor: pointer;" v-bind:class="{mtitle: readIdList.indexOf(o.id) < 0}"
               @click="pressReleaseDetail(o)">{{o.title}}</a></div>
          <div   class="mmargintop mfloatright mcolor" v-bind:class="{mdis: o.resource == ''}">来源：{{o.resource}}</div>
        </div>
        <div  class="bigborder mbackcol mhei">
          <div  class="mwidth mfloatleft mtop">
            <label  class="minlinre">阅读&nbsp;|&nbsp;{{o.readNum}}</label>
            <label  class="minlinre"> 点赞&nbsp;|&nbsp;{{o.likeNum}}</label>
            <label  class="minlinre">评论&nbsp;|&nbsp;{{o.effectiveCommentNum}}</label>
          </div>
          <div  class="mfloatright mtop mcolor">{{o.createDate}}</div>
        </div>
      </div>
      <!--工具条-->
      <el-col :span="24" class="toolbar">
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          @size-change="handlePageSizeChange"
          @current-change="handleCurrentPageChange"
          layout="total,sizes,prev, pager, next, jumper"
          :total="total" style="text-align: center">
        </el-pagination>
      </el-col>
    </el-card>
  </div>

</template>
<script>
import {getAllPressRelease, addReadRecord, getCurrentUserReadList, getReadPressRelease, getUnreadPressRelease} from '../../api/v3/PressRelease';
// import {objToFilter} from '../../lib/util';
export default {
  data () {
    return {
      token: this.$store.state.token,
      view: 'all',
      loadTableData: false,
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      sortProp: 'sorts',
      sortOrder: 'descending',
      condition: {
        'title': null
      },
      readList: [],
      readIdList: []
    };
  },
  methods: {
    handlePageSizeChange (val) {
      this.pageSize = val;
      this.getTableData(this.view);
    },
    handleCurrentPageChange (val) {
      this.currentPage = val;
      this.getTableData(this.view);
    },
    viewChange (val) {
      this.currentPage = 1;
      this.getTableData(val);
    },
    // 获取新闻详情
    pressReleaseDetail (val) {
      var self = this;
      addReadRecord(val.id);
      setTimeout(function () {
        self.$router.push('/marketing/pressReleaseDetail/' + val.id); // 跳转到詳情页面
      }, 500);
    },
    handleIconClick () {
      this.getTableData('all', this.condition.title);
      // this.condition.title = '';
    },
    // 获取当前用户的阅读记录
    getCurrentUserReadRecord () {
      getCurrentUserReadList().then((res) => {
        if (res.data) {
          this.readList = res.data;
          this.readIdList = this.readList.map(o => o.marketingPressReleaseId);
        }
      });
    },
    // 获取表格数据
    getTableData (val, filter = '') {
      if (val === 'all') {
        // 获取全部新闻公告
        getAllPressRelease({
          filters: filter,
          token: this.token,
          page: this.currentPage - 1,
          size: this.pageSize,
          sort: ['isStick,asc', 'stickTime,desc', 'createDate,desc']
        }).then((res) => {
          if (res.data) {
            this.tableData = res.data;
            this.total = Number(res.headers['x-total-count']);
          }
        });
      } else if (val === 'read') {
        // 获取已读新闻公告
        getReadPressRelease({
          page: this.currentPage - 1,
          size: this.pageSize
        }).then((res) => {
          if (res.data) {
            this.loadTableData = false;
            this.tableData = res.data;
            this.total = Number(res.headers['x-total-count']);
          }
        });
      } else if (val === 'unRead') {
        // 获取未读新闻公告
        getUnreadPressRelease({
          page: this.currentPage - 1,
          size: this.pageSize
        }).then((res) => {
          if (res.data) {
            this.tableData = res.data;
            this.total = Number(res.headers['x-total-count']);
          }
        });
      }
    }
  },
  mounted () {
    this.getTableData(this.view);
    this.getCurrentUserReadRecord();
  }
};
</script>
<style lang="less">
  .mplatformpressrelease {
    .minlinre {
      display: inline-block;
      width: 80px;
      font-size: 12px;
      color: #666666;
      margin-left: 5px;
    }

    .mtitle {
      font-weight: bold;
      text-decoration: none;
    }

    .el-table .cell {
      padding-left: 0px;
      padding-right: 0px;
      padding-bottom: 20px;
      padding-top: 10px;
    }

    .stick {
      color: #2B7EFD;
      font-weight: bold;
    }

    .mwhiteborder {
      border: 6px solid white;
    }

    .divheight1 {
      min-height: 40px;
    }

    .bigborder {
      border: 1px solid #E9EEF2;
    }

    .mbackcol {
      background-color: #FBFDFF;
    }

    .mmargintop {
      margin-top: 10px;
      margin-left: 5px;
      margin-right: 5px;
    }

    .mfonts {
      font-size:15px
    }

    .mwidth {
      max-width: 1300px;
    }

    .mfloatleft {
      float: left;
    }

    .mfloatright {
      float: right;
      text-align: center;
      max-width: 200px;
      margin-right: 5px;
    }

    .mcolor {
      color: #666666;
      font-size: 12px;
    }

    .mtop {
      margin-top: 5px;
    }

    .mhei {
      height: 30px;
    }
    .mdis {
      display: none;
    }
  }
</style>
